<template>
    <div style="height: 100%">
        <el-card>
            <div slot="header" class="clearfix">
                <span>企业用工动态统计图</span>
                <el-button style="float: right; padding: 3px 1px;font-size: 14px" @click="generate" type="text">生成图表
                </el-button>
                <el-button style="float: right; padding: 3px 1px;font-size: 14px" @click="exportImg" type="text">导出图片
                </el-button>
            </div>
            <div>
                <el-form :model="param" ref="form" label-width="120px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="时间类型：" prop="name">
                                <el-radio v-model="param.dateType" label="year">按年份</el-radio>
                                <el-radio v-model="param.dateType" label="month">按月份</el-radio>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if="param.dateType == 'year'">
                            <el-form-item label="时间：">
                                <el-date-picker
                                        v-model="startYear"
                                        type="year"
                                        value-format="yyyy"
                                        align="right"
                                        placeholder="选择开始年份">
                                </el-date-picker>
                                至
                                <el-date-picker
                                        v-model="endYear"
                                        type="year"
                                        value-format="yyyy"
                                        align="right"
                                        placeholder="选择结束年份">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if="param.dateType == 'month'">
                            <el-form-item label="时间：">
                                <el-date-picker
                                        v-model="month"
                                        type="monthrange"
                                        align="right"
                                        unlink-panels
                                        value-format="yyyy-MM"
                                        range-separator="至"
                                        start-placeholder="开始月份"
                                        end-placeholder="结束月份"
                                        :picker-options="pickerOptions">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="行业:">
                                <el-cascader ref="industry" style="width: 100%" v-model="selectedIndustry"
                                             clearable
                                             :options="industryList"
                                             :props="{value: 'id', label: 'name',multiple: true}"
                                             :show-all-levels="false"
                                ></el-cascader>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div>
                <LineChart ref="chart" height="580px"
                           width="100%" :title="'企业用工动态统计图'"
                           :fileName="'企业用工动态统计图.png'"/>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import $http from "@/core/utils/http";
    import {API} from "@/core/api/API";
    import {errorMsg} from "@/core/utils/message";
    import {breakUpMonth, breakUpYear} from "@/core/utils/date";
    import {tree} from "@/core/utils/Utils";
    import LineChart from "@/components/Charts/LineChart.vue";

    @Component({
        name: 'UserPeopleChart',
        components: {LineChart},
    })
    export default class UserPeopleChart extends mixins(BaseVue, Kit) {
        param: any = {
            dateType: 'year',
            industry: []
        };

        // 年份选择
        startYear: string = "";
        endYear: string = "";
        // 月份选择
        month: any = [];

        // 行业字典
        industryList: any = [];
        // 选中的行业
        selectedIndustry: any = [];

        pickerOptions: any = {
            shortcuts: [{
                text: '今年至今',
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date(new Date().getFullYear(), 0);
                    picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近六个月',
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setMonth(start.getMonth() - 6);
                    picker.$emit('pick', [start, end]);
                }
            }]
        };

        //初始化
        async mounted() {
            $http.post(API.industryTypeList, {}).then((res: any) => {
                if (res.success) {
                    this.industryList = tree(res.data);
                    // 设置默认条件
                    let myDate = new Date();
                    let fullYear = myDate.getFullYear();
                    this.startYear = fullYear.toString();
                    this.endYear = fullYear.toString();
                    for (let i in this.industryList) {
                        if (this.industryList[i].children && this.industryList[i].children.length > 0) {
                            for (let j in this.industryList[i].children) {
                                this.selectedIndustry.push([this.industryList[i].children[j].pid, this.industryList[i].children[j].id]);
                            }
                        } else {
                            this.selectedIndustry.push([this.industryList[i].id]);
                        }
                    }
                    this.generate();
                } else {
                    errorMsg("行业类型数据获取失败");
                }
            });
        }

        // 生成图表
        generate() {
            //console.log(this.selectedIndustry)
            if (this.selectedIndustry.length == 0) {
                errorMsg("请选择行业");
                return;
            }
            if (this.param.dateType == 'year') {
                if (!this.startYear || !this.endYear) {
                    errorMsg("请选择时间");
                    return;
                }
            } else {
                if (!this.month || this.month.length == 0) {
                    errorMsg("请选择时间");
                    return;
                }
            }

            if (this.param.dateType == 'year') {
                if (this.startYear && this.endYear) {
                    this.param.dateList = breakUpYear(this.startYear, this.endYear);
                } else {
                    this.param.dateList = [];
                }
            } else {
                if (this.month && this.month.length > 0) {
                    this.param.dateList = breakUpMonth(this.month[0], this.month[1]);
                } else {
                    this.param.dateList = [];
                }
            }
            // 整理行业参数数组
            for (let i = 0; i < this.selectedIndustry.length; i++) {
                if (this.selectedIndustry[i].length == 1) {
                    this.param.industry[i] = this.selectedIndustry[i][0];
                } else {
                    this.param.industry[i] = this.selectedIndustry[i][1];
                }
            }
            $http.post(API.dynamicHumanInfoStatistical, this.param).then((res: any) => {
                if (res.success) {
                    // 整理选中的行业id与name数组
                    let legendList = [];
                    let chartData = [];
                    let node = (this.$refs.industry as any).getCheckedNodes();
                    for (let i = 0; i < node.length; i++) {
                        for (let j in res.data) {
                            if (node[i].data.id == j) {
                                legendList.push(node[i].data.name);
                                chartData.push({name: node[i].data.name, type: "line", data: res.data[j]});
                            }
                        }
                    }
                    (this.$refs.chart as any).changeChart(legendList, chartData, this.param.dateList);
                }
            })
        }

        // 导出图片
        exportImg() {
            (this.$refs.chart as any).exportImg("企业用工动态统计图.png");
        }
    }


</script>

<style scoped lang="scss">

</style>
